<template>
<div class="problem-status">
<el-button class="refreash"
           type="primary" round
           @click="refresh">刷新</el-button>
<el-pagination layout="prev, pager, next"
                   :current-page="this.currentPage"
                   @current-change="switchPage"
                   :total="this.total"
                   :page-size="this.pageSize"></el-pagination>
    <el-table :data="this.tableData"
              v-loading="loading">
              <el-table-column prop="submitTime"
                       label="提交时间"
                       min-width="14%">
        <template slot-scope="scope">
          <span>{{new Date(scope.row.submitTime).toLocaleString(
            'chinese',
            { hour12: false }
          )}}</span></template>
      </el-table-column>
            <el-table-column label="昵称" min-width="12%">
        <template slot-scope="scope">
          <el-link type="primary" @click="toUser(scope.row.username)">{{
            scope.row.nickname
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="评测结果"
                       min-width="14%">
        <template slot-scope="scope">
          <el-tag size="medium"
                  effect="dark"
                  :type="switchResultColor(scope.row.result)">{{ scope.row.result }}</el-tag>

        </template>
      </el-table-column>
      <el-table-column label="代码"
                       min-width="8%">
        <template slot-scope="scope">
          <el-link type="primary"
                   @click="toCodeView(scope.row.id)">{{scope.row.language}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="timeUsed"
                       label="耗时"
                       min-width="8%"></el-table-column>
      <el-table-column prop="memoryUsed"
                       label="使用内存"
                       min-width="8%"></el-table-column>
    </el-table>
</div>
</template>
<script>
export default {
  props: {
    pid: String
  },
  data () {
    return {
      searchUsername: this.$store.getters.getUsername,
      currentPage: 1,
      pageSize: 15,
      total: 0,
      tableData: [],
      loading: false,
      resultList: [
        { name: '-', value: '' },
        { name: 'Pending...', value: 'Pending...' },
        { name: 'Accepted', value: 'Accepted' },
        { name: 'Wrong Answer', value: 'Wrong Answer' },
        { name: 'Compilation Error', value: 'Compilation Error' },
        { name: 'Runtime Error', value: 'Runtime Error' },
        { name: 'Time Limit Exceeded', value: 'Time Limit Exceeded' },
        { name: 'Memory Limit Exceeded', value: 'Memory Limit Exceeded' },
        { name: 'Output Limit Exceeded', value: 'Output Limit Exceeded' },
        { name: 'Presentation Error', value: 'Presentation Error' },
        { name: 'System Error', value: 'System Error' },
        // { name: 'Running......', value: 'Running......' },
        { name: 'Submit Error', value: 'Submit Error' },
        { name: 'Judging...', value: 'Judging...' },
        { name: 'Score', value: 'Score' }
      ],
      langList: [
        { name: '-', value: '' },
        { name: 'C++', value: 'G++' },
        { name: 'C', value: 'GCC' },
        { name: 'JAVA', value: 'JAVA' },
        { name: 'Python2', value: 'Python2' },
        { name: 'C++', value: 'G++11' },
        { name: 'C', value: 'GCC11' },
        { name: 'VC++', value: 'VC++' },
        { name: 'C#', value: 'C#' },
        { name: 'GO 1.8', value: 'GO 1.8' },
        { name: 'JavaScript', value: 'JavaScript' },
        { name: 'Pascal', value: 'Pascal' }
      ]
    }
  },
  mounted () {
    this.getStatus()
  },
  methods: {
    switchPage (val) {
      this.currentPage = val
      this.getStatus()
    },
    handleSelect () {
      this.currentPage = 1
      this.getStatus()
    },
    toCodeView (val) {
      if (this.$store.getters.getIsLogin) {
        this.$router.push({ path: '/CodeView', query: { id: val } })
      } else {
        this.$notify({
          title: '提示',
          message: '登录后才能查看这个评测的解答详情哦',
          type: 'warning',
          offset: 100,
          duration: 3000
        })
      }
    },
    switchResultColor (str) {
      if (str === 'Accepted' || str === 'Score 100') {
        return 'success'
      } else if (str === 'Presentation Error') {
        return 'warning'
      } else if (str === 'Pending...' || str === 'Judging...') {
        return 'info'
      } else if (str === 'Submit Error' || str.substring(0, 5) === 'Score') {
        return ''
      } else {
        return 'danger'
      }
    },
    switchResultClass (str) {
      if (str === '-') {
        return ''
      } else if (str === 'Accepted' || str === 'Score 100') {
        return 'green-font'
      } else if (str === 'Presentation Error') {
        return 'orange-font'
      } else if (str === 'Pending...' || str === 'Judging...') {
        return 'grey-font'
      } else if (str === 'Submit Error' || str.substring(0, 5) === 'Score') {
        return 'blue-font'
      } else {
        return 'red-font'
      }
    },
    async getStatus () {
      this.loading = true
      let params = new URLSearchParams()
      params.append('pageNum', this.currentPage)
      params.append('pageSize', this.pageSize)
      params.append('username', this.searchUsername)
      params.append('problemId', this.pid)
      let dataStatus = await this.$http
        .get('/judge_status/list', params)
        .catch(() => {
          this.loading = false
        })
      if (dataStatus.code !== 10000) {
        this.$message.error('评测列表获取失败！')
      }
      this.tableData = dataStatus.datas[0]
      this.total = dataStatus.datas[1]
      this.loading = false
    },
    refresh () {
      this.loading = true
      this.getStatus()
      this.loading = false
    }
  },
  beforeRouteLeave (to, from, next) {
    // 如果是点击到代码详情或者题目列表时，离开评测页面时让评测页面缓存
    if (to.name === 'CodeView' || to.name === 'Submit') {
      from.meta.keepAlive = true
    } else {
      // 否则，离开评测页面不缓存
      from.meta.keepAlive = false
    }
    next()
  }
}
</script>

<style scoped>
.bottom-pagination {
  float: right;
  margin-bottom: 10px;
}

.green-font {
  font-weight: bold;
  color: green;
}

.orange-font {
  font-weight: bold;
  color: orange;
}

.grey-font {
  font-weight: bold;
  color: grey;
}

.blue-font {
  font-weight: bold;
  color: blue;
}

.red-font {
  font-weight: bold;
  color: red;
}
.refreash{
    position: absolute;
    top:7px;
    left:10px;
}
</style>
